<template>
	<view class="content">
		<view class="list" v-for="item in xm":key="item.id" >
			<view class="list-title" >{{item.name}}</view>
			<view class="list-item" >{{item.price}}</view>
			<view class="list-item" >
					<image :src="item.urlpic" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xm:[
					{"id":1, "name":"烫发","price":"45元","urlpic":"../../static/icon/dfnh.png"},
					{"id":2, "name":"理发","price":"15元","urlpic":"../../static/icon/jcf.png"},
					{"id":3, "name":"染发","price":"45元","urlpic":"../../static/icon/rf.png"},
					{"id":4, "name":"护发","price":"25元","urlpic":"../../static/icon/lz.png"},
					{"id":5, "name":"刘海","price":"5元","urlpic":"../../static/icon/lh.png"},
					{"id":6, "name":"洗发","price":"5元","urlpic":"../../static/icon/xf.png"},
				],
			}
		},
		
		methods: {
			
		}
	}
</script>

<style lang="scss">

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 50upx;
	}

	.list {
		display: flex;
		flex-direction: row;
		width: 680upx;
		margin: auto;
		margin-top: 20upx;
		background-image: linear-gradient(125deg,#55ffff,#55aaff,#5555ff, #5500ff, #0000ff);
		border-radius: 20upx;
		padding-bottom: 20upx;
		border-style:solid;
		border-color:#f3faff;
	}

	.list-title {
		width: 580upx;
		padding: 20upx;
		display: flex;
		font-size: 40upx;
		font-weight: bold;
		margin: auto;
	}

	.list-item {
		width: 580upx;
		padding: 20upx;
		display: flex;
		margin: auto;
		font-size: 30upx;
		align-items: center;
	}

	.xiala {
		display: flex;
		padding: 10upx;
		border-radius: 10upx;
		color: #000000;
		font-size: 25upx;

	}

	.xiala image {
		display: flex;
		padding-top: 5upx;
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;

	}
</style>